<template>
    <div >
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :has-pagination="false">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="Refresh" @click="handleSearch">刷新</el-button>
                </template>
                <template #p_group_code="{rows}">
                    <el-tag  type="info">设备{{ rows.p_group_code}}</el-tag>
                </template>
                <template #no_rate="{rows}">
                    <el-tag v-if="rows.no_rate <= 0.2" type="error">{{ (rows.no_rate * 100).toFixed(0) + '%'}}</el-tag>
                    <el-tag v-else-if="rows.no_rate > 0.2" type="success">{{(rows.no_rate * 100).toFixed(0) + '%'}}</el-tag>
                </template>
                
            </TableCustom>

        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { Refresh } from '@element-plus/icons-vue';
import { monitor_equipment_list } from '@/api';
import TableCustom from '@/components/table-custom.vue';



const handleSearch = () => {
    getData()
};

// 表格相关
let columns = ref([
    { prop: 'c_install_area', label: '场地' },
    { prop: 'p_c_code', label: '设备编码' },
    { prop: 'p_group_code', label: '设备分组' },
    { prop: 'p_glasses_type', label: '眼镜类型' },
    { prop: 'no_rate', label: '剩余率' },
])

const tableData = ref([]);
const getData = async () => {
    const res = await monitor_equipment_list()
    tableData.value = res.data;
};
getData();

</script>

<style scoped></style>